<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>插件管理 - 编辑插件</title>

    <link
            href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
            rel="stylesheet"
    />
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
</head>
<body>
<cms-layout layout="main::admin/layout/master">
    <div id="app">
        <h2 class="text-xl font-semibold mb-4">编辑插件</h2>
        <el-form :model="pluginForm" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="插件包" class="form-item">
                        <el-upload
                                :file-list="pluginForm.zipFileList"
                                :auto-upload="false"
                                action="/plugins/plugins-feature-plugin-market/admin/market/upload/plugin"
                                :on-change="handleZipChange"
                                list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="Logo" class="form-item">
                        <el-upload
                                :file-list="pluginForm.logoFileList"
                                :auto-upload="false"
                                action="/plugins/plugins-feature-plugin-market/admin/market/upload/logo"
                                :on-change="handleLogoChange"
                                list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="插件ID" class="form-item">
                <el-input v-model="pluginForm.pluginId" disabled></el-input>
            </el-form-item>
            <el-form-item label="名称" class="form-item">
                <el-input v-model="pluginForm.name"></el-input>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="价格" class="form-item">
                        <el-input v-model="pluginForm.price" type="number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="原价" class="form-item">
                        <el-input v-model="pluginForm.originalPrice" type="number"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="描述" class="form-item">
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
            </el-form-item>
            <el-form-item class="form-item">
                <el-button type="primary" @click="savePlugin">保存</el-button>
                <el-button @click="cancelEdit">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</cms-layout>
</body>

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    let editor = null;
    new Vue({
        el: '#app',
        data() {
            return {
                pluginForm: {
                    pluginId: '',
                    name: '',
                    logoFileList: [],
                    zipFileList: [],
                    description: '',
                    price: 0,
                    originalPrice: 0
                }
            }
        },
        mounted() {
            this.initEditor();
            this.loadPluginData();
        },
        methods: {
            initEditor() {
                let that = this;
                const {createEditor, createToolbar} = window.wangEditor

                const editorConfig = {
                    placeholder: '',
                    onChange(editor) {
                        const html = editor.getHtml()
                    },
                }

                editor = createEditor({
                    selector: '#editor-container',
                    html: '',
                    config: editorConfig,
                    mode: 'default', // or 'simple'
                })

                const toolbarConfig = {}

                const toolbar = createToolbar({
                    editor,
                    selector: '#toolbar-container',
                    config: toolbarConfig,
                    mode: 'default', // or 'simple'
                })
                var unescapedNodes = "";
                //console.log('[[${test}]]')
                editor.setHtml(unescapedNodes)
            },
            loadPluginData() {
                const urlParams = new URLSearchParams(window.location.search);
                const pluginId = urlParams.get('plugin_id');
                if (pluginId) {
                    // Load plugin data from server
                    axios.get(`/plugin-market/detail/${pluginId}`).then(response => {
                        if (response.data.code === 0) {
                            Object.assign(this.pluginForm, response.data.data);
                        }
                    });
                }
            },
            handleLogoChange(file, fileList) {
                this.pluginForm.logoFileList = fileList;
            },
            handleZipChange(file, fileList) {
                this.pluginForm.zipFileList = fileList;
            },
            savePlugin() {
                const formData = new FormData();
                if (this.pluginForm.logoFileList.length > 0) {
                    formData.append('logo', this.pluginForm.logoFileList[0].raw);
                }
                if (this.pluginForm.zipFileList.length > 0) {
                    formData.append('zip', this.pluginForm.zipFileList[0].raw);
                }
                formData.append('pluginId', this.pluginForm.pluginId);
                formData.append('name', this.pluginForm.name);
                formData.append('description', this.pluginForm.description);
                formData.append('price', this.pluginForm.price);
                formData.append('originalPrice', this.pluginForm.originalPrice);

                axios.post('/plugin-market/save', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(response => {
                    if (response.data.code === 0) {
                        this.$message.success('插件保存成功');
                        window.location.href = '/plugins/plugins-feature-plugin-market/admin/market';
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(() => {
                    this.$message.error('插件保存失败');
                });
            },
            cancelEdit() {
                window.location.href = '/plugins/plugins-feature-plugin-market/admin/market';
            }
        }
    })
</script>
</html>